import React, { useEffect, useRef, useState } from 'react';
import { Card, Modal, Button, Form, Image, message } from 'antd';
import { connect, useRequest } from "umi";
import { province, city, area, prodtree } from '@/services/basic';
import InitForm from '@/components/InitForm';
import { doFetch } from '@/utils/doFetch';
import ProDescriptions from '@ant-design/pro-descriptions';


let defaultFields = {
    "companyName": {
        "value": null,
        "type": "input",
        "title": "公司名称",
        "name": [
            "companyName"
        ],
        "required": true
    },
    "provinceId": {
        "value": null,
        "type": "select",
        "title": "省",
        "name": [
            "provinceId"
        ],
        "required": true,
        "linked": true,
        "options": {
            "database": province,
            "params": {}
        }
    },
    "cityId": {
        "value": null,
        "type": "select",
        "title": "市",
        "name": [
            "cityId"
        ],
        "required": true,
        "linked": true,
        "belinked": {
            "options": {
                "database": city,
                "params": {
                    "provinceId": "linked"
                }
            }
        }
    },
    "districtId": {
        "value": null,
        "type": "select",
        "title": "区",
        "name": [
            "districtId"
        ],
        "required": true,
        "belinked": {
            "options": {
                "database": area,
                "params": {
                    "cityId": "linked"
                }
            }
        }
    },
    "detailAddress": {
        "value": null,
        "type": "input",
        "title": "公司地址",
        "name": [
            "detailAddress"
        ],
        "required": true
    },
    "categoryIdList": {
        "value": null,
        "type": "treeselect",
        "title": "主营产品类目",
        "name": [
            "categoryIdList"
        ],
        "required": true,
        "multiple": true,
        "options": {
            "database": prodtree,
            "params": {}
        },
        "col": {
            "span": 24
        }
    },
    "companyProfile": {
        "value": null,
        "type": "input",
        "title": "公司简介",
        "name": [
            "companyProfile"
        ],
        "required": true,
        "col": {
            "span": 24
        }
    },
    "companyDesc": {
        "value": null,
        "type": "textarea",
        "title": "公司描述",
        "name": [
            "companyDesc"
        ],
        "required": true,
        "col": {
            "span": 24
        }
    },
    "webSiteUrl": {
        "value": null,
        "type": "input",
        "title": "公司网站",
        "name": [
            "webSiteUrl"
        ],
        "required": true,
        "col": {
            "span": 24
        }
    },
    "licenseUrlIds": {
        "value": null,
        "type": "upload",
        "title": "营业执照",
        "name": [
            "licenseUrlIds"
        ],
        "required": true,
        "listType": "img",
        "multiple": false,
        "limit": 1,
        "col": {
            "span": 24
        }
    },
    "logoUrlIds": {
        "value": null,
        "type": "upload",
        "title": "公司logo",
        "name": [
            "logoUrlIds"
        ],
        "required": true,
        "listType": "img",
        "multiple": false,
        "limit": 1,
        "col": {
            "span": 24
        }
    }
}
let Company = (props) => {
    const { global, dispatch } = props;

    const actionRef = useRef();
    const [vs, cvs] = useState(false),//表单显/隐
        [fields, cf] = useState(defaultFields),
        [iftype, ciftype] = useState({}),
        [formRef] = Form.useForm(),
        [data, cdata] = useState({});


    const { run, loading } = useRequest(doFetch, {
        manual: true,
        formatResult: (res) => res,
        onSuccess: (result, params) => {
            message.destroy()
            if (result.code == "0000") {
                cdata(result.data.data);
                cvs(false);
            } else {
                message.error(result.msg)
            }
        }
    })
    useEffect(() => {
        run({ url: "/ngic-promote-company/omCompanyInfoAudit/queryBeforeAddAudit", params: {} })
    }, [])

    const columns = [
        {
            "title": "公司名称",
            "dataIndex": "companyName",
            "key": "companyName"
        },
        {
            "title": "公司logo",
            "dataIndex": "logoUrlIds",
            "key": "logoUrlIds",
            render: (_, row) => {
                if (!row.logoUrlIds) {
                    return <Image width={32} height={32} style={{ padding: 2 }} src={require("@/assets/default.png")}></Image>
                } else {
                    return row.logoUrlIds.map(it => {
                        return <Image width={32} height={32} src={it.url} style={{ padding: 2 }}></Image>
                    })
                }
            }
        },
        {
            "title": "省",
            "dataIndex": "provinceName",
            "key": "provinceName"
        },
        {
            "title": "市",
            "dataIndex": "cityName",
            "key": "cityName"
        },
        {
            "title": "区",
            "dataIndex": "districtName",
            "key": "districtName"
        },
        {
            "title": "公司地址",
            "dataIndex": "detailAddress",
            "key": "detailAddress"
        },
        {
            "title": "公司简介",
            "dataIndex": "companyProfile",
            "key": "companyProfile"
        },
        {
            "title": "公司描述",
            "dataIndex": "companyDesc",
            "key": "companyDesc"
        },
        {
            "title": "公司网站",
            "dataIndex": "webSiteUrl",
            "key": "webSiteUrl"
        },
        {
            "title": "营业执照",
            "dataIndex": "licenseUrlIds",
            "key": "licenseUrlIds",
            render: (_, row) => {
                if (!row.licenseUrlIds) {
                    return <Image width={32} height={32} style={{ padding: 2 }} src={require("@/assets/default.png")}></Image>
                } else {
                    return row.licenseUrlIds.map(it => {
                        return <Image width={32} height={32} src={it.url} style={{ padding: 2 }}></Image>
                    })
                }
            }
        },
    ]


    let saveData = (values, fn) => {
        let newfields = JSON.parse(JSON.stringify(values));
        //新增&修改

        doFetch({ url: "/ngic-promote-company/omCompanyInfoAudit/save", params: { ...newfields } }).then(res => {
            if (res.code == "0000") {
                run({ url: "/ngic-promote-company/omCompanyInfoAudit/queryBeforeAddAudit", params: {} })
                message.success("操作成功！")
            }
        })
    }



    return (
        <div className="nopa autotable">
            <Card title={"公司信息"} extra={<a onClick={() => {
                ciftype({
                    val: "edit",
                    id: data.id,
                    title: "编辑公司信息"
                })
                cf(() => {
                    for (let i in defaultFields) {
                        defaultFields[i].value = data[i];
                        if (i.indexOf("password") != -1) {
                            defaultFields[i].hides = true;
                        }
                    }
                    return { ...defaultFields }
                });
                cvs(true);
            }}>
                编辑
            </a>}>
                <div style={{ padding: "18px 12px 0px 12px" }} className="minw">
                    <ProDescriptions
                        title={``}
                        columns={[...columns]}
                        column={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1, xxl: 1 }}
                        dataSource={data}
                    />
                </div>

            </Card>



            <Modal
                maskClosable={false}
                title={iftype.title}
                visible={vs}
                onCancel={() => cvs(false)}
                footer={false}
                destroyOnClose={true}
            >
                <InitForm
                    formRef={formRef}
                    fields={fields}
                    submitData={(values, fn) => {
                        saveData(values, fn)
                    }}
                    onChange={(changedValues, allValues) => {
                    }}
                    submitting={
                        loading || !vs
                    }
                >
                </InitForm>
            </Modal>
        </div>
    )
}

export default connect(({ global, loading }) => ({
    global,
    loading,
}))(Company)